<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>3D airport</title>
	<link rel="stylesheet" href="./css/style.css">
</head>

<body>
	<div class="left-dashboard" id="js-left-container">
		<div class="date-time">
			<div class="time" id="js-time"></div>
			<div class="date">
				<div id="js-weekday"></div>
				<div id="js-date"></div>
			</div>
		</div>
		<div class="content">
			<div class="left">
				<div class="ctrl-block">
					<div class="ctrl active" id="js-ctrl-home" onclick="tabSelect('home')">
						<div class="ctrl-item"></div>
						<div class="icon home-icon"></div>
					</div>
					<div class="ctrl" id="js-ctrl-plane" onclick="tabSelect('plane')">
						<div class="ctrl-item"></div>
						<div class="icon plane-icon"></div>
					</div>
					<div class="ctrl" id="js-ctrl-cloud" onclick="tabSelect('cloud')">
						<div class="ctrl-item"></div>
						<div class="icon cloud-icon"></div>
					</div>
					<div class="ctrl" id="js-ctrl-sheild" onclick="tabSelect('sheild')">
						<div class="ctrl-item"></div>
						<div class="icon sheild-icon"></div>
					</div>
				</div>
				<div class="title-block">
					<div class="text">某某机场</div>
				</div>
				<div class="filter-block hide" id="js-sheild-filter">
					<div class="filter active">
						<div class="filter-item"></div>
						<div class="filter-title">最新</div>
					</div>
					<div class="filter">
						<div class="filter-item"></div>
						<div class="filter-title">最早</div>
					</div>
					<div class="filter">
						<div class="filter-item"></div>
						<div class="filter-title">亚健</div>
					</div>
					<div class="filter">
						<div class="filter-item"></div>
						<div class="filter-title">故障</div>
					</div>
					<div class="filter-info">排序方式</div>
				</div>
			</div>
			<div class="right" id="js-right-home">
				<div class="info-block">
					<div class="info-item info-1">
						<div class="title">正常停泊</div>
						<div class="num">22</div>
					</div>
					<div class="info-item info-2">
						<div class="title">晚点起飞</div>
						<div class="num">02</div>
					</div>
					<div class="info-item info-3">
						<div class="title">计划停泊</div>
						<div class="num">46</div>
					</div>
					<div class="info-item info-4">
						<div class="title">晚点到达</div>
						<div class="num">02</div>
					</div>
				</div>
				<div class="car-park-info">
					<div class="car-park">
						<div>长途停车场</div>
						<div>56/90</div>
					</div>
					<div class="car-park">
						<div>公交停车场</div>
						<div>34/126</div>
					</div>
					<div class="car-park">
						<div>地上停车场</div>
						<div>256/560</div>
					</div>
					<div class="car-park">
						<div>地下停车场</div>
						<div>389/560</div>
					</div>
				</div>
				<div class="equip-block">
					<div class="equip-circle">
						<div class="equip-percent">66<span class="unit">%</span></div>
						<div class="equip-title">设备<br />在线率</div>
					</div>
					<div class="equip-circle">
						<div class="equip-percent">67<span class="unit">%</span></div>
						<div class="equip-title">修复<br />故障率</div>
					</div>
					<div class="equip-circle">
						<div class="equip-percent">23<span class="unit">%</span></div>
						<div class="equip-title">剩余<br />故障率</div>
					</div>
				</div>
				<div class="charts-block">
					<div class="chart-item chart-no-1">
						<div class="the-chart" id="left-chart-1"></div>
						<div class="chart-title">时段航班</div>
					</div>
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="left-chart-2"></div>
						<div class="chart-title">客流量</div>
					</div>
				</div>
			</div>
			<div class="right hide" id="js-right-plane">
				<div class="info-block">
					<div class="info-item info-1">
						<div class="title">正常停泊</div>
						<div class="num">22</div>
					</div>
					<div class="info-item info-2">
						<div class="title">晚点起飞</div>
						<div class="num">02</div>
					</div>
					<div class="info-item info-3">
						<div class="title">计划停泊</div>
						<div class="num">46</div>
					</div>
					<div class="info-item info-4">
						<div class="title">晚点到达</div>
						<div class="num">02</div>
					</div>
					<!-- <div class="info-title">航班信息</div> -->
				</div>
				<div class="repair-time">
					<div class="repair-item">
						<div class="name">桌椅松动</div>
						<div class="process">
							<div class="top-process" style="width: 100%;"></div>
						</div>
					</div>
					<div class="repair-item">
						<div class="name">起动活门</div>
						<div class="process">
							<div class="top-process" style="width: 90%;"></div>
						</div>
					</div>
					<div class="repair-item">
						<div class="name">雷达系统</div>
						<div class="process">
							<div class="top-process" style="width: 80%;"></div>
						</div>
					</div>
					<div class="repair-item">
						<div class="name">引气系统</div>
						<div class="process">
							<div class="top-process" style="width: 70%;"></div>
						</div>
					</div>
					<div class="repair-item">
						<div class="name">防冰活门</div>
						<div class="process">
							<div class="top-process" style="width: 60%;"></div>
						</div>
					</div>
					<div class="repair-item">
						<div class="name">引擎</div>
						<div class="process">
							<div class="top-process" style="width: 50%;"></div>
						</div>
					</div>
					<div class="repair-item">
						<div class="name">起落架</div>
						<div class="process">
							<div class="top-process" style="width: 40%;"></div>
						</div>
					</div>
					<div class="repair-title">检修耗时</div>
				</div>
				<div class="equip-block">
					<div class="equip-circle">
						<div class="equip-percent">46<span class="unit">%</span></div>
						<div class="equip-title">跑道<br />负载</div>
					</div>
					<div class="equip-circle">
						<div class="equip-percent">52<span class="unit">%</span></div>
						<div class="equip-title">机位<br />负载</div>
					</div>
					<div class="equip-circle">
						<div class="equip-percent">09<span class="unit">%</span></div>
						<div class="equip-title">今日<br />晚点率</div>
					</div>
				</div>
				<div class="charts-block">
					<div class="chart-item chart-no-1">
						<div class="the-chart" id="left-chart-3"></div>
						<div class="chart-title">时段航班</div>
					</div>
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="left-chart-4"></div>
						<div class="chart-title">客流量</div>
					</div>
				</div>
			</div>
			<div class="right hide" id="js-right-cloud">
				<div class="charts-block">
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="chart-weather-0"></div>
						<div class="chart-title">北京</div>
					</div>
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="chart-weather-1"></div>
						<div class="chart-title">上海</div>
					</div>
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="chart-weather-2"></div>
						<div class="chart-title">深圳</div>
					</div>
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="chart-weather-3"></div>
						<div class="chart-title">成都</div>
					</div>
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="chart-weather-4"></div>
						<div class="chart-title">香港</div>
					</div>
					<div class="chart-item chart-no-2">
						<div class="the-chart" id="chart-weather-5"></div>
						<div class="chart-title">英国-伦敦</div>
					</div>
				</div>
			</div>
			<div class="right hide" id="js-right-sheild">
				<div class="equip-block two-circle">
					<div class="equip-circle">
						<div class="equip-percent">67</div>
						<div class="equip-title">修复<br />告警数</div>
					</div>
					<div class="equip-circle">
						<div class="equip-percent">23</div>
						<div class="equip-title">剩余<br />告警数</div>
					</div>
				</div>
				<div class="equip-info">
					<div class="equip-item">
						<div class="equip-type">亚健康设备</div>
						<div class="equip-title">联锁C 交换机2#</div>
					</div>
					<div class="equip-item">
						<div class="equip-type">亚健康设备</div>
						<div class="equip-title">T3C-2-11#门禁</div>
					</div>
					<div class="equip-item">
						<div class="equip-type">亚健康设备</div>
						<div class="equip-title">T3D-3-02#烟感</div>
					</div>
					<div class="equip-item">
						<div class="equip-type">亚健康设备</div>
						<div class="equip-title">联锁C 交换机2#</div>
					</div>
					<div class="equip-item error-equip">
						<div class="equip-type">故障设备</div>
						<div class="equip-title">计轴机柜C-6#板卡</div>
					</div>
					<div class="equip-item error-equip">
						<div class="equip-type">故障设备</div>
						<div class="equip-title">T3E-09#登机桥</div>
					</div>
					<div class="equip-item error-equip">
						<div class="equip-type">故障设备</div>
						<div class="equip-title">组合柜11-8#端口</div>
					</div>
					<div class="equip-item error-equip">
						<div class="equip-type">故障设备</div>
						<div class="equip-title">T3E-09#登机桥</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="top-camera-block">
		<div class="camera-title"><strong id="js-photo-location">国内航班进出港</strong>有人吸烟</div>
		<div class="photo-container">
			<img class="photo" src="./imgs/photo1.jpg" id="js-photo-1">
			<img class="photo" src="./imgs/photo2.jpeg" id="js-photo-2">
		</div>
	</div>
	<div id="WebGL-output"></div>
	<div class="right-dashboard" id="js-right-container">
		<div class="main-container">
			<div class="menu-map">
				<div class="center-circle">
					<div class="second-circle">
						<div class="third-circle">
							<div class="forth-circle">
								<div class="col-container left-col">
									<b>639</b>
									<span>总数</span>
								</div>
								<div class="col-container right-col">
									<p>在线<b>264</b></p>
									<p>离线<b>375</b></p>
									<p>故障<b>4</b></p>
									<p>在线<b>264</b></p>
									<p>当前接入总用户数<b>264</b></p>
									<p>总流量<b>145G</b></p>
									<p>历史流量峰值<b>10G</b></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="line-area-chart">
				<div id="e-line-area-chart" style="width: 390px;height: 222px;"></div>
				<div id="e-bar-area-chart" style="width: 390px;height: 322px;"></div>
			</div>
		</div>
	</div>
	<!-- 弹框 -->
  <div class="model-wrapper-bk hide js-model-cancel" id="js-model-bk"></div>
  <div class="model-wrapper hide" id="js-model">
    <div class="model">
			<div class="model-content">
				<div class="info">
					海南航空 · 经济舱 · Boeing 787 · HU 7635
				</div>
				<div class="travel">
					<div class="travel-item start-location">上午7:35 · 北京首都国际机场(PEK)</div>
					<div class="use-time">行程时间：2h 30m</div>
					<div class="travel-item stop-location">上午10:05 · 长沙黄花国际机场(CSX)</div>
				</div>
				<div class="tips">
					<div class="tips-title">座位功能</div>
					<p>腿部活动空间宽敞（81厘米）</p>
					<p>Wi-Fi</p>
					<p>提供座椅内电源和 USB 接口电源</p>
					<p>提供点播视频服务</p>
				</div>
			</div>
    </div>
  </div>
	<script src="js/stats.min.js"></script>
	<script src="js/three.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script src="js/DDSLoader.js"></script>
	<script src="js/OBJLoader.js"></script>
	<script src="js/MTLLoader.js"></script>
	<script src="js/CSS2DRenderer.js"></script>
	<!-- <script src="js/utils.js"></script> -->
	<script src="js/echarts.min.js"></script>
	<script src="js/left-chart.js"></script>
	<script src="js/right-chart.js"></script>
	<!-- 功能tab页 -->
	<script>
		var rightArr = document.querySelectorAll('.right')
		var tabArr = document.querySelectorAll('.ctrl')

		function tabSelect(name) {
			rightArr.forEach(right => {
				right.classList.add('hide')
			})
			document.getElementById('js-right-' + name).classList.remove('hide')
			tabArr.forEach(tab => {
				tab.classList.remove('active')
			})
			document.getElementById('js-ctrl-' + name).classList.add('active')
			if (name === 'sheild') {
				document.getElementById('js-sheild-filter').classList.remove('hide')
			} else {
				document.getElementById('js-sheild-filter').classList.add('hide')
			}
		}
	</script>
	<!-- 动态时间 -->
	<script>
		// 时间更新
		function getDate() {
			var theDate = new Date();
			var year = theDate.getFullYear(); //获取完整的年份(4位,1970-????)
			var month = checkZero(theDate.getMonth() + 1); //获取当前月份(0-11,0代表1月)
			var day = checkZero(theDate.getDate()); //获取当前日(1-31)
			var weekday = theDate.getDay(); //获取当前星期X(0-6,0代表星期天)
			var hour = checkZero(theDate.getHours()); //获取当前小时数(0-23)
			var minute = checkZero(theDate.getMinutes()); //获取当前分钟数(0-59)
			var weekObj = {
				0: '星期天',
				1: '星期一',
				2: '星期二',
				3: '星期三',
				4: '星期四',
				5: '星期五',
				6: '星期六'
			}
			document.querySelector('#js-time').innerText = `${(hour)}:${minute}`
			document.querySelector('#js-weekday').innerText = weekObj[weekday]
			document.querySelector('#js-date').innerText = `${year}-${month}-${day}`
			requestAnimationFrame(getDate);
		}
		requestAnimationFrame(getDate);

		function checkZero(num) {
			if (num < 10) {
				return `0${num}`
			} else {
				return num
			}
		}
	</script>
	<!-- 模型 -->
	<script>
		var stats
		var scene, camera, renderer
		// 鼠标点击定位
		var raycaster = new THREE.Raycaster()
		var mouse = new THREE.Vector2()
		// 鼠标移动定位
		var raycaster2 = new THREE.Raycaster()
		var mouse2 = new THREE.Vector2()
		var objectArr = [] // 存放场景中所有mesh
		// 提示框
		var infoModal, labelRenderer

		// 用于飞机动画
		var movePlane, planeAnimateModal

		// ===============  开启帧数检测 ======================
		function initStats() {
			stats = new Stats();
			stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
			stats.dom.style.position = 'absolute';
			stats.dom.style.right = '0px';
			stats.dom.style.left = 'unset';
			stats.dom.style.top = '0px';
			document.body.appendChild(stats.dom);

			function animate() {
				stats.begin();
				stats.end();
				requestAnimationFrame(animate);
			}
			requestAnimationFrame(animate);
		}

		// ===========  初始化场景  ========================
		function initScene() {
			scene = new THREE.Scene(); //场景构建
			// 构建一个坐标轴
			// var axes = new THREE.AxisHelper(120);
			// scene.add(axes);
		}

		// =========== 渲染器构建 ========================
		function initRenderer() {
			renderer = new THREE.WebGLRenderer({
				antialias: true, // 抗锯齿
				alpha: true // 背景透明
			}); //渲染器构建
			renderer.setClearAlpha(0); // 透明度为0
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.shadowMapEnabled = true; //激活阴影
			document.querySelector("#WebGL-output").appendChild(renderer.domElement)
		}

		// =========== 2D渲染器构建 =====================
		function init2DRenderer() {
			labelRenderer = new THREE.CSS2DRenderer()
			labelRenderer.setSize(window.innerWidth, window.innerHeight)
			labelRenderer.domElement.style.position = 'absolute'
			labelRenderer.domElement.style.top = 0
			labelRenderer.domElement.style.pointerEvents = 'none';
			document.querySelector('#WebGL-output').appendChild(labelRenderer.domElement);
		}

		// ===============  初始化摄像头 ================
		function initCamera() {
			camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000); //相机构建
			camera.position.x = 163;
			camera.position.y = 80;
			camera.position.z = -89;
			camera.lookAt(scene.position)
		}

		// ==================== 添加轨道控制器 =========================
		function initControl() {
			var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
			orbitControls.target = new THREE.Vector3(0, 0, 0) // 控制焦点
			orbitControls.autoRotate = false // 自动旋转关闭
			renderScene();

			function renderScene() {
				var clock = new THREE.Clock() // 用于更新轨道控制器
				var delta = clock.getDelta() // 获取时间差
				orbitControls.update(delta) // 更新时间
				requestAnimationFrame(renderScene);
			}
		}

		// ================== 灯光 =============================
		function initLights() {
			scene.add(new THREE.AmbientLight(0x0c0c0c));
			//添加材质灯光阴影
			var spotLight1 = new THREE.SpotLight(0xffffff);
			spotLight1.position.set(-50, 100, 0);
			scene.add(spotLight1);

			var spotLight2 = new THREE.SpotLight(0xffffff);
			spotLight2.position.set(150, 500, 0);
			scene.add(spotLight2);

			var spotLight3 = new THREE.SpotLight(0xffffff);
			spotLight3.position.set(150, 50, -200);
			scene.add(spotLight3);

			var spotLight4 = new THREE.SpotLight(0xffffff);
			spotLight4.position.set(150, 50, 200);
			scene.add(spotLight4);

			var spotLight5 = new THREE.SpotLight(0xffffff);
			spotLight5.position.set(-500, 10, 0);
			scene.add(spotLight5);
		}

		// =================== model 加载 ================================
		// 递归出所有mesh
		function getMesh(s, arr, name = '') {
			s.forEach(v => {
				if (v.children && v.children.length > 0) {
					getMesh(v.children, arr, v.name)
				} else {
					if (v instanceof THREE.Mesh) {
						if (name) {
							v.name = name
						}
						arr.push(v)
					}
				}
			})
		}

		function initObjModel() {
			var onProgress = function (xhr) {
				if (xhr.lengthComputable) {
					var percentComplete = xhr.loaded / xhr.total * 100;
					// 每次加载完毕将mesh放进数组
					if (percentComplete === 100) {
						objectArr = []
						scene.traverse(function (s) {
							if (s && s.type === 'Scene') {
								getMesh(s.children, objectArr)
							}
						})
					}
				}
			};
			var onError = function (xhr) {};
			var mtlLoader = new THREE.MTLLoader();
			mtlLoader.setPath('objs/');
			// 地面
			mtlLoader.load('ground.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('ground.obj', function (object) {
					object.position.x = -50;
					object.position.z = -15;
					object.position.y = 0;
					object.scale.set(0.05, 0.05, 0.05);
					object.name = 'ground';
					scene.add(object);
				}, onProgress, onError);
			});
			// 最前端广场
			mtlLoader.load('1.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('1.obj', function (object) {
					object.position.x = -50;
					object.position.z = -15;
					object.position.y = 0;
					object.scale.set(0.05, 0.05, 0.05);
					object.name = 'ground2';
					scene.add(object);
				}, onProgress, onError);
			});
			// 候机1
			mtlLoader.load('22.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('22.obj', function (object) {
					object.position.x = -50;
					object.position.z = -15;
					object.position.y = 0;
					object.scale.set(0.05, 0.05, 0.05);
					object.name = 'house1';
					scene.add(object);
				}, onProgress, onError);
			});
			// 候机2
			mtlLoader.load('3.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('3.obj', function (object) {
					object.position.x = -50;
					object.position.z = -15;
					object.position.y = 0;
					object.scale.set(0.05, 0.05, 0.05);
					object.name = 'house2';
					scene.add(object);
				}, onProgress, onError);
			});
			// 候机3
			mtlLoader.load('44.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('44.obj', function (object) {
					object.position.x = -50;
					object.position.z = -15;
					object.position.y = 0;
					object.scale.set(0.05, 0.05, 0.05);
					object.name = 'house3';
					scene.add(object);
				}, onProgress, onError);
			});
			// 登机桥
			var bridgeArr = [
				{x:-50, z:-15},
				{x:-56, z:-15},
				{x:-48, z:-15},
				{x:-52.8, z:-15},
				{x:-70.5, z:-15},
				// {x:-67, z:-15},
				{x:-65.1, z:-15},
				{x:-80.5, z:-15},
				{x:-82.5, z:-15},
				{x:-85, z:-15},
				{x:-88, z:-15},
				{x:-65.1, z:-15}
			]
			bridgeArr.forEach((v, i) => {
				mtlLoader.load('5dengjiqiao.mtl', function (materials) {
					materials.preload()
					var objLoader = new THREE.OBJLoader()
					objLoader.setMaterials(materials)
					objLoader.setPath('objs/')
					objLoader.load('5dengjiqiao.obj', function (object) {
						object.position.x = v.x;
						object.position.z = v.z;
						object.position.y = 0;
						object.scale.set(0.05, 0.05, 0.05);
						object.name = 'bridge' + i;
						scene.add(object);
					}, onProgress, onError);
				})
			})
			mtlLoader.load('5dengjiqiao.mtl', function (materials) {
				materials.preload()
				var objLoader = new THREE.OBJLoader()
				objLoader.setMaterials(materials)
				objLoader.setPath('objs/')
				objLoader.load('5dengjiqiao.obj', function (object) {
					object.position.x = -67;
					object.position.z = -15;
					object.position.y = 0;
					object.scale.set(0.05, 0.05, 0.05);
					object.name = 'bridge111';
					object.traverse( function ( child ) {
						if ( child instanceof THREE.Mesh ) {
							child.material= new THREE.MeshBasicMaterial({color: 0xFF0000, transparent: true, opacity: 0.8})
						}
					})
					scene.add(object);
				}, onProgress, onError);
			})
			// 带拐的登机桥
			mtlLoader.load('5dengjiqiao2.mtl', function (materials) {
				materials.preload()
				var objLoader = new THREE.OBJLoader()
				objLoader.setMaterials(materials)
				objLoader.setPath('objs/')
				objLoader.load('5dengjiqiao2.obj', function (object) {
					object.position.x = -50;
					object.position.z = -15;
					object.position.y = 0;
					object.scale.set(0.05, 0.05, 0.05);
					object.name = 'bridge2';
					scene.add(object);
				}, onProgress, onError);
			})
			//  有动画的飞机
			mtlLoader.load('fj.mtl', function (materials) {
				materials.preload()
				var objLoader = new THREE.OBJLoader()
				objLoader.setMaterials(materials)
				objLoader.setPath('objs/')
				objLoader.load('fj.obj', function (object) {
					object.position.x = 35
					object.position.z = 21.25
					object.position.y = 0
					object.rotation.y = 4.695
					object.scale.set(0.02, 0.02, 0.02)
					object.name = 'plane1'
					movePlane = object
					scene.add(object)
				}, onProgress, onError)
			})
			// 飞机
			mtlLoader.load('fj.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('fj.obj', function (object) {
					object.position.x = 28.5;
					object.position.z = -3;
					object.position.y = 0;
					object.rotation.y = 119.6;
					object.scale.set(0.01, 0.01, 0.01);
					object.name = 'plane5';
					scene.add(object);
				}, onProgress, onError);
			})
			// 飞机
			mtlLoader.load('fj.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('fj.obj', function (object) {
					object.position.x = 24.5;
					object.position.z = -3;
					object.position.y = 0;
					object.rotation.y = 119.6;
					object.scale.set(0.01, 0.01, 0.01);
					object.name = 'plane4';
					scene.add(object);
				}, onProgress, onError);
			})
			// 飞机
			mtlLoader.load('fj.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('fj.obj', function (object) {
					object.position.x = 17;
					object.position.z = -3;
					object.position.y = 0;
					object.rotation.y = 119.6;
					object.scale.set(0.01, 0.01, 0.01);
					object.name = 'plane3';
					scene.add(object);
				}, onProgress, onError);
			})
			// 飞机
			mtlLoader.load('fj.mtl', function (materials) {
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('objs/');
				objLoader.load('fj.obj', function (object) {
					object.position.x = 9;
					object.position.z = -3;
					object.position.y = 0;
					object.rotation.y = 119.6;
					object.scale.set(0.01, 0.01, 0.01);
					object.name = 'plane2';
					scene.add(object);
				}, onProgress, onError);
			})

			// 飞机信息牌
			var planeInfo = document.createElement('div')
			planeInfo.className = 'the-modal'
			planeInfo.innerHTML = '<div>海南航空 HU 7635</div>' +
				'<div>Boeing 787</div>'
			planeInfo.classList.add('hide')
			infoModal = new THREE.CSS2DObject(planeInfo)
			scene.add(infoModal)

			// 飞机故障提示
			var tipsGeo1 = new THREE.PlaneBufferGeometry(3, 1, 1, 1)
			var tips1 = new THREE.Mesh(tipsGeo1, createFont('正在检修中...'))
			tips1.position.set(28.5, 1.5, -3)
			tips1.rotation.y = 3.15
			scene.add(tips1)

			// 飞机延误提示
			var tipsGeo2 = new THREE.PlaneBufferGeometry(3, 1, 1, 1)
			var tips2 = new THREE.Mesh(tipsGeo2, createFont('晚点 00:40', {bgColor: '#E6A23C', fontColor: '#FFFFFF'}))
			tips2.position.set(9, 1.5, -3)
			tips2.rotation.y = 3.15
			scene.add(tips2)

			// 登机桥故障提示
			var tipsGeo3 = new THREE.PlaneBufferGeometry(3, 1, 1, 1)
			var tips3 = new THREE.Mesh(tipsGeo3, createFont('机械故障'))
			tips3.position.set(13.8, 2, 4)
			scene.add(tips3)

			// 动画飞机跟随的牌子
			var planeAnimateInfo = document.createElement('div')
			planeAnimateInfo.className = 'the-animate-modal'
			planeAnimateInfo.innerHTML = '<div>海南航空 HU 7635</div>' +
				'<div>Boeing 787</div>'
			planeAnimateInfo.classList.add('hide')
			planeAnimateModal = new THREE.CSS2DObject(planeAnimateInfo)
			scene.add(planeAnimateModal)

		}

		// ===================== 创建文字贴图 ======================
		/**
		 * text 文字
		 * options.fontColor 文字颜色
		 * options.bgColor 背景颜色
		 */
		function createFont (text, options={bgColor: '', fontColor: ''}) {
			var canvas = document.createElement("canvas");
			canvas.width = 512;
			canvas.height = 128;
			var c = canvas.getContext('2d');
			// 矩形区域填充背景
			c.fillStyle = options.bgColor || '#ff0000';
			c.fillRect(0, 0, 512, 128);
			c.beginPath();
			// 文字
			c.beginPath();
			c.translate(256,64);
			c.fillStyle = options.fontColor || '#ffffff'; //文本填充颜色
			c.font = 'bold 36px 微软雅黑'; //字体样式设置
			c.textBaseline = 'middle'; //文本与fillText定义的纵坐标
			c.textAlign = 'center'; //文本居中(以fillText定义的横坐标)
			c.fillText(text, 0, 0);
			var texture = new THREE.CanvasTexture(canvas);
			var textMaterial = new THREE.MeshPhongMaterial({
				map: texture, // 设置纹理贴图
				// side: THREE.DoubleSide,
				transparent: true,
				opacity: 0.9
			});
			textMaterial.map.needsUpdate = true
			return textMaterial
		}

		// ===================== 方向键控制摄像头 =======================
		function initArrowKeydown() {
			document.addEventListener('keydown', handleKeyDown, false);

			function handleKeyDown(e) {
				var e = e || window.event;
				var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
				if ('37, 38, 39, 40, 65, 87, 68, 83'.indexOf(keyCode) === -1) {
					return;
				} else {
					switch (e.keyCode) {
						case 37:
						case 65:
							CameraMove('x', -0.1);
							break;
						case 38:
						case 87:
							CameraMove('y', 0.1);
							break;
						case 39:
						case 68:
							CameraMove('x', 0.1);
							break;
						case 83:
						case 40:
							CameraMove('y', -0.1);
							break;
					}
				}
			}

			function CameraMove(direction, distance) {
				camera.position[direction] += distance;
			}
		}

		// ===================== 动画 ======================
		function initAnimate() {
			renderer.render(scene, camera)
			labelRenderer.render(scene, camera)
			if (movePlane) {
				movePlane.position.x -= 0.2
				if (movePlane.position.x < -10) {
					movePlane.position.y += 0.02
				}
				if (movePlane.position.x < -100) {
					movePlane.position.x = 35
					movePlane.position.y = 0
				}
				planeAnimateModal.position.set(movePlane.position.x, movePlane.position.y + 4.5, movePlane.position.z)
				planeAnimateModal.element.classList.remove('hide')
			}
			requestAnimationFrame(initAnimate)
		}

		// ===================== 动态切换警告框 =====================
		var theWarnModal
		var i = 0
		function changeWarnModal () {
			if (theWarnModal) scene.remove(theWarnModal)
			theWarnModal = null
			if (i === 3) i = 0
			switch(i) {
				case 0:
					var warnModal = document.createElement('div')
					warnModal.className = 'the-warn-modal'
					warnModal.innerHTML = '<img src="./imgs/plane1.jpg"><div>飞机故障</div>'
					theWarnModal = new THREE.CSS2DObject(warnModal)
					theWarnModal.name = "警告牌"
					theWarnModal.position.set(28.5, 4, -3)
					scene.add(theWarnModal)
					break
				case 1:
					var warnModal = document.createElement('div')
					warnModal.className = 'the-warn-modal'
					warnModal.innerHTML = '<img src="./imgs/plane2.jpg"><div>飞机延误</div>'
					theWarnModal = new THREE.CSS2DObject(warnModal)
					theWarnModal.name = "警告牌"
					theWarnModal.position.set(9, 4, -3)
					scene.add(theWarnModal)
					break
				case 2:
					var warnModal = document.createElement('div')
					warnModal.className = 'the-warn-modal'
					warnModal.innerHTML = '<img src="./imgs/bridge.jpg"><div>登机桥故障</div>'
					theWarnModal = new THREE.CSS2DObject(warnModal)
					theWarnModal.name = "警告牌"
					theWarnModal.position.set(13.8, 4, 4)
					scene.add(theWarnModal)
					break
			}
			i++
		}

		// ===================== 动态切换摄像头 =====================
		var photoLocation = document.getElementById('js-photo-location')
		var photo1 = document.getElementById('js-photo-1')
		var photo2 = document.getElementById('js-photo-2')
		function animatePhoto () {
			var arr = ['综合旅客服务', '国内航班进出港', '国际航班进出港']
			var photoArr = ['./imgs/photo1.jpg', './imgs/photo2.jpeg', './imgs/photo3.jpg', './imgs/photo4.jpg', './imgs/photo5.jpg', './imgs/photo6.jpg', './imgs/photo7.jpg']
			photoLocation.innerText = arr[Math.floor(Math.random() * 3)]
			photo1.src = photoArr[Math.floor(Math.random() * 7)]
			photo2.src = photoArr[Math.floor(Math.random() * 7)]
		}

		// ===================== 鼠标点击触发 ======================
		function handleMouseDown(event) {
			mouse.x = (event.clientX / window.innerWidth) * 2 - 1
			mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
			raycaster.setFromCamera(mouse, camera)
			var intersects = raycaster.intersectObjects(objectArr)
			// console.log('当前点击的Mash', intersects)
			if (intersects && intersects.length > 0) {
				if (intersects[0].object.name.indexOf('house') !== -1) {
					location.href = 'inner.html'
				}
				if (intersects[0].object.name.indexOf('plane') !== -1) {
					model.classList.remove('hide')
					modelBk.classList.remove('hide')
				}
			}
		}

		// ================== 鼠标移动触发 =========================
		function handleMouseMove(event) {
			mouse2.x = (event.clientX / window.innerWidth) * 2 - 1
			mouse2.y = -(event.clientY / window.innerHeight) * 2 + 1
			raycaster2.setFromCamera(mouse2, camera)
			var intersects = raycaster2.intersectObjects(objectArr)
			if (intersects && intersects.length > 0) {
				if (intersects[0].object.name.indexOf('plane') !== -1) {
					var obj = intersects[0].object
					infoModal.position.copy(obj.parent.position)
					infoModal.element.classList.remove('hide')
				} else {
					infoModal.element.classList.add('hide')
				}
			} else {
				infoModal.element.classList.add('hide')
			}
		}

		// ===================== 等比缩放 ==========================
		function handleWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight
			camera.updateProjectionMatrix()
			renderer.setSize(window.innerWidth, window.innerHeight)
			var ratio = window.innerHeight / 1080
			var left = document.getElementById('js-left-container')
			left.setAttribute("style", `
				transform: scale(${ratio});
				transform-origin: left top;
			`)
			var right = document.getElementById('js-right-container')
			right.setAttribute("style", `
				transform: scale(${ratio});
				transform-origin: right top;
			`)
		}

		// 初始化飞机点击弹框
		var modelBk = document.querySelector('#js-model-bk');
		var model = document.querySelector('#js-model');
		var cancel = document.querySelectorAll('.js-model-cancel');
		function initClickModal () {
			cancel.forEach(function(v) {
				v.onclick = function() {
					modelBk.classList.add('hide');
					model.classList.add('hide');
				}
			})
		}
		function initAll() {
			// initStats()
			initScene()
			initRenderer()
			init2DRenderer()
			initCamera()
			initControl()
			initLights()
			initObjModel()
			initArrowKeydown()
			initAnimate()
			initClickModal()
			changeWarnModal()
			animatePhoto()
			setInterval(() => {
				changeWarnModal()
				animatePhoto()
			}, 3000)
			document.addEventListener('click', handleMouseDown, false);
			document.addEventListener('mousemove', handleMouseMove, false);
			handleWindowResize()
			window.addEventListener('resize', handleWindowResize, false);
		}
		window.onload = function () {
			initAll()
		}
	</script>
</body>

</html>
